<template>
  <div>
      <el-dialog title="题目预览" :visible="dialogTableVisible">
           <!-- 题目属性 -->
           <div class="qustionsAttr">
          <div>
              【题型】：{{rowdata.questionType}}
          </div>
          <div>
              【编号】：{{rowdata.id}}
          </div>
          <div>
              【难度】：{{rowdata.difficulty}}
          </div>
          <div>
              【标签】：{{rowdata.tags}}
          </div>
          <div>
              【学科】：{{rowdata.subject}}
          </div>
          <div>
              【目录】：{{rowdata.catalog}}
          </div>
          <div>
              【方向】：{{rowdata.direction}}
          </div>
          <!-- 分割线 -->
          <div class="splitLine"></div>
           </div>
           <!-- 题干部分 -->
           <div>
               <div>
                   【题干】：
               </div>
               <div v-html="rowdata.question"  class="qustion">
               </div>
           </div>
            <!-- 分割线 -->
          <div class="splitLine"></div>
          <!-- 参考答案部分 -->
          <div class="video">
              <div>
                   【参考答案】：
                   <el-button type="danger"
                   @click="showVideo=true">视频答案预览</el-button>
                   <video width="320" height="240" controls autoplay v-if="showVideo">
    <source :src="rowdata.videoURL" type="video/mp4">
    <source :src="rowdata.videoURL" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
             </div>
          </div>
            <!-- 分割线 -->
          <div class="splitLine"></div>
          <!-- 答案解析部分 -->
          <div class="qustionParse">
              <div>
                  <span>【答案解析】：</span><span v-html="rowdata.answer"></span>
              </div>
          </div>
           <!-- 分割线 -->
          <div class="splitLine"></div>
          <!-- 答案备注 -->
          <div class="anwser">
              <div>
                  【题目备注】：{{rowdata.remarks}}
              </div>
          </div>
          <el-button @click="$parent.dialogTableVisible=false,showVideo=false">取 消</el-button>
      </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['dialogTableVisible', 'rowdata'],
  data () {
    return {
      showVideo: false
    }
  },
  components: {},
  watch: {},
  computed: {},
  methods: {}
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  width: 900px;
  .qustionsAttr {
    overflow: hidden;
    > div {
      width: 25%;
      float: left;
      margin-top: 20px;
    }
    .splitLine {
      width: 100%;
      border: 1px solid rgb(154, 154, 154);
    }
  }
}
.splitLine {
  margin: 20px 0;
  width: 100%;
  border: 1px solid rgb(154, 154, 154);
}
.qustionParse {
  div {
    display: flex;
    align-items: center;
  }
}
.qustion {
  color: rgb(0, 0, 255);
}
</style>
